Step 2 - Create keyboard navigation for the Home screen

In this step you create keyboard navigation to switch between the screens showing the recent and favorite destinations on the Home application screen. You also set a key to set focus to the button that opens the application screen which shows the sliders for adjusting the air conditioning temperature.

Set a key to focus elements in the Home screen

In this section you create keyboard navigation to set focus to the button which navigates to the AirCondition application screen and to navigate to the Recent and Favorite application screens when the user presses the ↑ (Up Arrow) key on their keyboard.

To set a key to focus elements in the Home screen:

  1. In the Project select the Screen node and in the Node Components click Add new trigger for Key Down to add a Key Down trigger.
  2. In the Trigger Settings Editor for that trigger click Add condition and in the Trigger Condition Editor set:

    In the Trigger Condition Editor click Save.

    Kanzi sets off this trigger only when the Home node is active. When you press the ↑ (Up Arrow) key when any other Page node is active, the application does not navigate to the Favorite node.

  3. In the Trigger Settings Editor click Add condition to add another condition and in the Trigger Condition Editor set:

    In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

    Kanzi sets off this trigger when the user presses the ↑ (Up Arrow) key.

  4. In the Node Components for the Key Down trigger you added at the beginning of this section add an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Button 2D node ACButton.
airConditionButton = node.lookupNode('#ACButton');

recentPage = node.lookupNode('#Recent');
favoritePage = node.lookupNode('#Favorite');

// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
recentActive = recentPage.getProperty('Page.State');
favoriteActive = favoritePage.getProperty('Page.State')

screen = node.lookupNode('#Screen');

// Get the node that has focus.
nodeInFocus = getFocusedNode();

// If the Screen node has focus, set focus to the ACButton node.
// By default when a Button node has focus, it receives click input from the keyboard keys Enter,
// Space, and Enter on the numeric pad.
// If the ACButton node has focus, set focus to the Recent or Favorite node
// based on which of those nodes is active.
if (nodeInFocus == screen)
{
    airConditionButton.trySetFocus();
}
else if (nodeInFocus == airConditionButton && recentActive == 1)
{
    recentPage.trySetFocus();
}
else if (nodeInFocus == airConditionButton && favoriteActive == 1)
{
    favoritePage.trySetFocus();
}

    You use this script to set focus to the ACButton node, Recent node or Favorite node when the user presses the ↑ (Up Arrow) key on their keyboard. When the ACButton node has focus, the user can use the Enter key on their keyboard to navigate to the AirCondition screen.

  5. In the Project select the Screen node and in the Node Components copy the Execute Script action you created in the previous step.
  6. In the Project > Home > HomeControls select the ACButton node, in the Node Components add a Key Down trigger, and paste the Execute Script action.
    When the ACButton node has focus and the user presses the ↑ (Up Arrow) key on their keyboard, you execute the same script on that node. This allows you to set focus from the ACButton node to the Recent or Favorite node.
  7. In the Trigger Settings Editor for the Key Down trigger you created in the previous step add conditions:

In the Preview when you press the ↑ (Up Arrow) key on the keyboard when the Home screen is active, you:

In the Preview when the ACButton is focused, press the Enter key on the keyboard to navigate to the AirCondition application screen.

Set a keyboard key to focus the navigation bar

In this section you add the functionality to move the focus from the content of the Home application screen to the navigation bar.

To use keyboard keys to set focus to the navigation bar:

  1. In the Project select the Home > RootPage > Home > Recent node and in the Node Components add a Key Down trigger.
  2. In the Trigger Settings Editor for the trigger you created in the previous step add conditions:

    In the Trigger Condition Editor click Save.

    In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

  3. In the Node Components for the Key Down trigger you created at the beginning of this section add an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Button 2D node ACButton.
airConditionButton = node.lookupNode('#ACButton');

recentPage = node.lookupNode('#Recent');
favoritePage = node.lookupNode('#Favorite');

// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
recentActive = recentPage.getProperty('Page.State');
favoriteActive = favoritePage.getProperty('Page.State')

screen = node.lookupNode('#Screen');

// Get the node that has focus.
nodeInFocus = getFocusedNode();

// If the Page nodes Recent or Favorite have focus, set focus to the Button 2D node ACButton.
// If the Button 2D node ACButton has focus, set focus to the Screen node.
if (nodeInFocus == recentPage)
{
    airConditionButton.trySetFocus();
}
else if (nodeInFocus == favoritePage)
{
    airConditionButton.trySetFocus();
}
else if (nodeInFocus == airConditionButton)
{
    screen.trySetFocus();
}

    You use this script to set focus to the ACButton node or Screen node when the user presses the ↓ (Down Arrow) key on their keyboard. When the focus is on the Screen, the user can use the → (Right Arrow) and ← (Left Arrow) keyboard keys to navigate from the Home application screen to the Car, Media, and Navigation application screens. In the next section you create scripts to use keyboard arrow keys to navigate between the Recent and Favorite application screens.

  4. In the Project select the Recent node and in the Node Components copy and paste the Key Down trigger to the Favorite node.
    You use the same trigger to set focus to the ACButton node when the Favorite node has focus and the user presses the ↓ (Down Arrow) key.
  5. In the Project select the Recent node and in the Node Components from the Key Down trigger copy the Execute Script action you created in step 3.
  6. In the Project select the ACButton node, in the Node Components click Add new trigger for Key Down and to that trigger paste the Execute Script action you copied.
  7. In the Trigger Settings Editor for the trigger you created in the previous step add a condition which sets off the trigger when the user presses the ↓ (Down Arrow) key on their keyboard. In the Trigger Condition Editor set:

    In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

In the Preview when you press the ↓ (Down Arrow) key on the keyboard when the Recent or Favorite screen has focus, you:

Create keyboard navigation between the Recent and Favorite screens

In this section you set the application to navigate between the Recent and Favorite screens when the user presses a key on the keyboard.

To create keyboard navigation between the Recent and Favorite screens:

  1. In the Project > RootPage > Home select the Recent node and in the Node Components click Add new trigger for Key Down.
  2. In the Trigger Settings Editor for that trigger click Add condition and add conditions:
  3. In the Node Components for the Key Down trigger add an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Page nodes Recent and Favorite.
recentPage = node.lookupNode('#Recent');
favoritePage = node.lookupNode('#Favorite');

// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
recentActive = recentPage.getProperty('Page.State');
favoriteActive = favoritePage.getProperty('Page.State')

// If the Page node Recent is active, set focus to the Page node Favorite and navigate to that page.
if (recentActive == 1)
{
    favoritePage.trySetFocus();
    favoritePage.navigateToThisPage();
}

    You use this script to navigate from the Recent application screen to the Favorite application screen when the user presses the → (Right Arrow) key on their keyboard.

  4. In the Project > RootPage > Home select the Favorite node and in the Node Components click Add new trigger for Key Down.
  5. In the Trigger Settings Editor for that trigger click Add condition and add two conditions:
  6. In the Node Components for the Key Down trigger add an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Page nodes Recent and Favorite.
recentPage = node.lookupNode('#Recent');
favoritePage = node.lookupNode('#Favorite');

// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
recentActive = recentPage.getProperty('Page.State');
favoriteActive = favoritePage.getProperty('Page.State')

// If the Page node Favorite  is active, set focus to the Page node Recent and navigate to that page.
if (favoriteActive == 1)
{
    recentPage.trySetFocus();
    recentPage.navigateToThisPage();
}

    You use this script to navigate from the Favorite application screen to the Recent application screen when the user presses the ← (Left Arrow) key on their keyboard.

  7. Set focus to the Recent and Favorite nodes when the user navigates to one of those pages with the pointer:

    You set focus to the Recent or Favorite node when the user clicks the RecentButton or FavoriteButton node to navigate to one of those pages. This way the user can use the keyboard keys to continue navigating in the application.

  8. In the Project select the Recent node and in the Node Components from the Button: Click trigger remove the Navigate to Page action.
    Because the script you execute on the RecentButton node navigates to the Page node Favorite, that node no longer needs the Navigate to Page action.
  9. Repeat the previous step for the Favorite node.

In the Preview when the Recent or Favorite application screen has focus, use the → (Right Arrow) and ← (Left Arrow) keyboard keys to navigate between those screens.

Set a key to close the air conditioning settings

In this section you set the AirCondition screen to close when the user presses a key on their keyboard.

To set a key to close the air conditioning settings:

  1. In the Project > RootPage > Home > AirCondition select the Driver node and in the Node Components add a Key Down trigger.
  2. In the Trigger Settings for the trigger you created in the previous step click Add condition and in the Trigger Condition Editor set:

    In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

    You set the application to close the AirCondition window when the user presses the E key.

  3. Add to the trigger an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Screen node.
screen = node.lookupNode('#Screen');
// Set focus to the Screen node.
screen.trySetFocus();

    You set the application to execute a script which sets focus to the Screen when the trigger is set off. This way the focus does not stay on the Driver or Passenger nodes when the AirCondition application screen closes. At the end of this tutorial step you set focus to the Driver node when the user navigates to the AirCondition application screen.

  4. Add to the trigger a Navigate to Page action and set the Item to Screens/Screen/RootPage/Home/Recent.
    You set the application to navigate to the Recent node in the Home node.
  5. In the Project > RootPage > Home > AirCondition > Driver select the Slider 2D node and in the Node Components add a Key Down trigger.
    You use this trigger to close the AirCondition window when the Slider 2D node has focus.
  6. In the Trigger Settings for the trigger you created in the previous step click Add condition and in the Trigger Condition Editor set:

    In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.

    You set the application to close the AirCondition window when the user presses the E key.

  7. Add to the Key Down trigger you created in the previous step the actions you need to close the AirCondition window when the Slider 2D node has focus:
  8. Select the Slider 2D node and from the Node Components copy and paste the Key Down trigger you created in the previous steps to the Project > RootPage > Home > AirCondition > Passenger > Slider 2D node.
    You use the same trigger for the Slider 2D on the Passenger node to close the AirCondition window when that Slider 2D node has focus.
  9. In the Project > RootPage > Home select the AirCondition node and in the Node Components add to the Page Activated trigger an Execute Script action.
    The Page Activated trigger is set off when a Page or Page Host node becomes active.
  10. Create a script and in the Script Editor use this script:
    // Get the Page node Driver.
var driverPage = node.lookupNode('#Driver');

// Set focus to the Page node Driver.
driverPage.trySetFocus();

    You use this script to set focus to the Page node Driver when the Page Host node AirCondition is activated. When you navigate to the Driver page, you can use the same keyboard keys which you have defined in other parts of the application. In the next step of this tutorial you set the → and ← keys to navigate between the Driver and Passenger application screens.

In the Preview in the AirCondition application screen press the E key on the keyboard to close that screen.

Use these keyboard keys to navigate the application:


Organize the script files in your Kanzi Studio project

In this section you rename the scripts you created in this step of the tutorial and create folders for those scripts.

To organize the script files in your Kanzi Studio project:

  1. In the Library > Resource Files > Scripts rename:
  2. In the Library > Resource Files > Scripts create a folder, name it Home, and drag the NavigateUp.js, NavigateDown.js, OnRecentRight.js, and OnFavoriteLeft.js scripts to that folder.
    You use this folder to store those JavaScript scripts which you call on child nodes of the Home node.
  3. Repeat the previous step to create another folder, name it AirCondition, and drag the OnAirConditionActivated.js script to that folder.


< PREVIOUS STEP
NEXT STEP >

Open topic with navigation